<template>
    <!-- 分页组件 -->
    <section class="x-pager" :style="{textAlign: align}">
        <el-pagination :layout="layout" :background="background" :current-page.sync="pager.current" :page-sizes="pager.sizes" :page-size="pager.size" :total="pager.total" @current-change="onChangeCurrent" @size-change="onChangeSize"></el-pagination>
    </section>
</template>

<script>
    /**
     * 分页组件
     * 
     * @param {string} layout 分页子组件（total,sizes,prev,pager,next，jump）
     * @param {object} pager 分页数据 
     * 
     * */
    export default {
        name: 'the-pager',
        props: {
            layout: {
                type: String,
                default: 'total, sizes, prev, pager, next'
            },
            background: {
                type: Boolean,
                default: true
            },
            pager: {
                type: Object,
                default () {
                    return {
                        current: 1,
                        size: 20,
                        total: 0,
                        sizes: [20, 30, 50]
                    }
                }
            },
            align: {
                type: String,
                default: 'right'
            }
        },
        data() {
            return {

            }
        },
        methods: {
            onChangeSize(size) {
                if (this.pager.total == null) {
                    this.pager.total = null;
                    this.pager.size = size;
                } else {
                    this.pager.size = size;
                    this.pager.current = 1;
                }

                this.$emit('onChange', this.pager);
            },
            onChangeCurrent(index) {
                if (this.pager.total == null) {
                    this.pager.total = null;
                    this.pager.current = 1;
                } else {
                    this.pager.current = index;
                }

                this.$emit('onChange', this.pager);
            },
        }

    }
</script>